<template>
  <div class="goods-button">
    <div class="reduce" @click.stop="reduce(food)"><i class="icon-remove_circle_outline"></i></div>
    <div class="amount">{{ amount }}</div>
    <!--.stop阻止点击事件继续传播,因为在li中进行了2次点击事件的绑定-->
    <div class="add" @click.stop="add(food)"><i class="icon-add_circle"></i></div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'goods-button',
  props: {
    amount: Number,
    food: Object
  },
  methods: {
    ...mapMutations(['reduce', 'add'])
  }
}
</script>

<style lang="stylus" scoped>
@import "~assets/styles/variable.styl"
@import "~assets/styles/mixin.styl"

.goods-button
  display flex
  flex-direction row
  .reduce
    i
      font-size 24px
      color rgb(0, 160, 220)
      line-height 24px
  .amount
    margin 0 5px
    text-align center
    font-size 10px
    color rgb(147, 153, 159)
    line-height 24px
    width 12px
  .add
    i
      font-size 24px
      color rgb(0, 160, 220)
      line-height 24px
</style>
